<template>
  <div>
    <!-- 现场图片弹窗 -->
    <el-dialog
      title="现场图片"
      append-to-body
      :visible.sync="localPicBox"
      :close-on-click-modal="false"
      :before-close="handleClosePicBox"
      width="50%"
    >
      <el-carousel indicator-position="outside" trigger="click" :autoplay="false">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img :src="item.url" alt />
        </el-carousel-item>
      </el-carousel>

      <!-- 按钮 -->
      <div class="view_picture_footer">
        <el-button
          type="primary"
          size="small"
          @click="confirmViewPicture()">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      localPicBox: {default: false},
      localPictures: {default: []}
    },
    data() {
      return {
        imgList: []
      }
    },
    watch: {
      localPicBox() {
        if(this.localPicBox === true) {
          this.initData();
        }
      },
    },
    methods: {

      // 初始化图片
      initData() {
        this.imgList = [];
        this.localPictures.forEach(item => {

          this.imgList.push({url: item.fileUrl});
        });
      },

      // 确认照片
      confirmViewPicture() {
        this.$emit('confirmViewPicture');
      },

      // 关闭弹窗
      handleClosePicBox(done) {
        done();
        this.$emit('handleClosePicBox');
      }
    }
  }
</script>
